<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="#" id="light">
<br>
<div class="cls">
    传智教育
</div>
<div class="cls">
    黑马
</div>
<input type="checkbox" name="hobby">游戏<br>
<input type="checkbox" name="hobby">电影<br>
<input type="checkbox" name="hobby">旅游<br>
<script>
    //id
    var img = document.getElementById("light");
    //document.write(img);
    //src	设置或返回图像的 URL。
    img.src = "https://ts1.cn.mm.bing.net/th?id=OIP-C.TqL74pDlvGPwKR_wx8D9QAHaG1&w=188&h=170&c=8&rs=1&qlt=90&o=6&dpr=1.44&pid=3.1&rm=2"

    /**
     * element通用：
     * element.innerHTML    设置或返回元素的内容。
     * element.style    设置或返回元素的 style 属性。
     * @type {NodeListOf<HTMLElement>}
     */
    //标签名称
    var divs = document.getElementsByTagName("div");
    // document.write(divs);
    // for (let i = 0; i < divs.length; i++) {
    //     document.write(divs[i]);
    // }
    for (let i = 0; i < divs.length; i++) {
        divs[i].style.color = 'red';
        divs[i].innerHTML = "呵呵";
    }


    //name
    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        //document.write(hobbys[i]);
        /*
         checked 属性
         定义和用法
         checked 属性设置或返回 checkbox 是否应被选中。
         语法
         checkboxObject.checked=true|false
         说明
         该属性保存了 checkbox 的当前状态，不管何时，这个值发生变化的时候，onclick 事件句柄就会触发（也可能触发onchange 事件句柄）。
         */
        hobbys[i].checked = true;
    }

    //classname
    var clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        document.write(clss[i]);
    }
</script>
</body>
</html>